<template>
  <div class="pd-20">
    <div class="girl-say">
      <van-collapse v-model="activeNames">
        <van-collapse-item
          v-for="item in chats"
          :title="item.que"
          :key="item.que"
        >
          <div @click="copyWord(`${item.ans}`)">{{ item.ans }}</div>
        </van-collapse-item>
      </van-collapse>
      <van-collapse v-model="activeNames2" accordion>
        <van-collapse-item
          v-for="item in questions"
          :title="item.que"
          :key="item.que"
        >
          <div
            v-for="q in item.ans"
            :key="q"
            @click="copyWord(`${q}`)"
            style="margin-bottom: 10px"
          >
            {{ q }}
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import { points, diffs } from "../data/data";
export default {
  data() {
    return {
      points,
      diffs,
      activeNames: ["1"],
      activeNames2: ["2"],
    };
  },
  computed: {
    chats() {
      let res = [];
      for (var key in this.points) {
        res.push({
          que: key,
          ans: this.points[key],
        });
      }
      return res;
    },
    questions() {
      let res = [];
      for (var key in this.diffs) {
        res.push({
          que: key,
          ans: this.diffs[key],
        });
      }
      return res;
    },
  },
  mounted(){
      console.log(this.chats)
      console.log(this.questions)
  }
};
</script>

<style lang="scss" scoped>
</style>